<template>
  <view class="index-page">
    <u-navbar
      title="我的钱包"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>
    <view>
      <view class="qb-1">
        <view class="qb-2">
          <!-- <image src="@/static/images/qbbj.png" mode=""></image> -->
        </view>
        <view class="qb-3">
          <view class="qb-4">
            <view class="qb-5">我的余额</view>
            <view class="qb-6">¥ {{ state.balance || 0 }}</view>
          </view>
          <view class="qb-7">
            <view class="qb-8" @click="drawal">
              <image src="@/static/images/tixian.png" mode=""></image>
              提现
            </view>
            <view
              class="qb-8"
              @click="routerPush('/pages/my/my-wallet/recharge')"
            >
              <image src="@/static/images/chongzhi.png" mode=""></image>
              充值
            </view>
          </view>
        </view>
      </view>

      <view class="wd-15">
        <view
          class="wd-16"
          @click="routerPush('/pages/my/my-wallet/bill-etails')"
        >
          <view class="wd-17">
            <image src="@/static/images/zhangdan.png" mode=""></image>
            账单明细
          </view>
          <view class="wd-18">
            <image src="@/static/images/zhankai.png" mode=""></image>
          </view>
        </view>

        <view
          class="wd-16"
          @click="routerPush('/pages/my/my-wallet/bank-card')"
        >
          <view class="wd-17">
            <image src="@/static/images/yinhk.png" mode=""></image>
            我的银行卡
          </view>
          <view class="wd-18">
            <image src="@/static/images/zhankai.png" mode=""></image>
          </view>
        </view>
        <view class="wd-16" @click="state.show = true">
          <view class="wd-17">
            <image src="@/static/images/xiugmm.png" mode=""></image>
            修改支付密码
          </view>
          <view class="wd-18">
            <image src="@/static/images/zhankai.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>
  </view>
  <u-modal
    v-model="state.show"
    title="修改密码"
    @confirm="setPayPasswordData"
    show-cancel-button
  >
    <view class="alter">
      <view class="password"> 请输入新密码</view>
      <validCode
        :maxlength="6"
        isPwd
        style="margin-bottom: 20rpx"
        @finish="finish"
      ></validCode>
    </view>
  </u-modal>
</template>
<script lang="ts" setup>
import validCode from './validCode.vue'
import {
  getWalletList,
  setPayPassword,
  getBankCardList
} from '@/api/modules/user'
import { reactive } from 'vue'

const state = reactive({
  show: false,
  name: '星藏钱包',
  balance: '',
  passWord: ''
})
//提现
const drawal = () => {
  getBankCardList().then((result) => {
    if (result.data.length === 0) {
      uni.showToast({
        title: '请先绑定银行卡',
        icon: 'error'
      })
      return
    } else {
      uni.navigateTo({
        url: '/pages/my/my-wallet/withdrawal'
      })
    }
  })
}
const getWalletListData = () => {
  getWalletList().then((result) => {
    state.balance = result.data[0].balance
  })
}
getWalletListData()
//设置支付密码
const setPayPasswordData = () => {
  if (state.passWord.length < 6) {
    uni.showToast({
      title: '请输入完整',
      icon: 'error'
    })
    return
  }
  setPayPassword({ pay_password: state.passWord }).then((result) => {
    uni.showToast({
      title: '密码修改成功',
      icon: 'success'
    })
  })
}
//输入完毕
const finish = (str: string) => {
  state.passWord = str
}
const routerPush = (s: string) => {
  uni.navigateTo({
    url: s
  })
}
</script>
<style lang="less" scoped>
.alter {
  padding: 20rpx;
  .password {
    margin: 20rpx;
    font-weight: 600;
  }
}

.qb-1 {
  width: 686upx;
  margin: 0 auto;
  height: 250upx;
  left: 0;
  right: 0;
  position: relative;
  margin-top: 20upx;
  background-image: linear-gradient(to right, #3feaea, #0168e6);
  border-radius: 30rpx;
  .qb-2 {
    width: 100%;
    height: 250upx;
    position: absolute;

    image {
      user-select: none;
      pointer-events: none;
      width: 100%;
      height: 250upx;
    }
  }

  .qb-3 {
    width: 100%;
    height: 250upx;
    position: absolute;
    top: 0;

    .qb-4 {
      float: left;
      padding-top: 60upx;
      padding-left: 40upx;

      .qb-5 {
        font-size: 30upx;
        color: #333;
      }

      .qb-6 {
        font-size: 46upx;
        color: #333;
        margin-top: 20upx;
      }
    }

    .qb-7 {
      float: right;
      margin-top: 36upx;

      .qb-8 {
        width: 130upx;
        height: 62upx;
        background: rgba(255, 210, 121, 0.1);
        border-top-left-radius: 31upx;
        border-bottom-left-radius: 31upx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20upx;
        font-size: 26upx;
        color: #333;

        image {
          user-select: none;
          pointer-events: none;
          width: 36upx;
          height: 36upx;
          margin-right: 10upx;
        }
      }
    }
  }
}

.wd-15 {
  width: 686upx;
  margin: 0 auto;
  margin-top: 40upx;
}

.wd-16 {
  width: 100%;
  background: #231f30;
  border-radius: 20upx;
  padding: 0 25upx;
  height: 108upx;
  box-sizing: border-box;
  margin-top: 20upx;
}

.wd-17 {
  float: left;
  font-size: 30upx;
  color: #fff;
  line-height: 108upx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wd-17 image {
  user-select: none;
  pointer-events: none;
  width: 38upx;
  height: 38upx;
  display: block;
  margin-right: 14upx;
}

.wd-18 {
  float: right;
  line-height: 108upx;
}

.wd-18 image {
  user-select: none;
  pointer-events: none;
  width: 18upx;
  height: 20upx;
}
</style>
